<template>
    <div class="searchBox" >
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item :label="name+'：'">
            <el-input maxlength="50" clearable v-model.trim="formInline.fileName" :placeholder="name"></el-input>
          </el-form-item>
          <el-form-item :label="title+'：'">
            <el-select v-model="formInline.mediaType" >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            
          </el-form-item>
        </el-form>
        <div style="marginRight:15px">
          <el-button @click="onSubmit" class="submit">查询</el-button>
            <el-button @click="reset" class="reset">重置</el-button>
        </div>
      </div>
</template>

<script>
export default {
    props: {
        formInline: Object,
        options: Array,
        name: String,
        title: String,
    },
    data(){
        return{
            
        }
    },
    methods:{
        onSubmit() {
            this.$emit('serchFormInline', this.formInline)
        },
        reset(){
            this.formInline.fileName= ''
            this.formInline.mediaType= ''
        },
    }
}
</script>

<style lang='less' scoped>
.searchBox{
    // height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 4px solid #04D4FF;
    background-image: url('../assets/images/mouId/liang.png');
    background-repeat: no-repeat;
    background-size: contain ;
    background-color: #282C41;
    /deep/.el-form{
      display: flex;
      align-items: center;
      padding: 15px 15px;
    }
    /deep/.el-form--inline .el-form-item {
        margin-right:30px;
        margin-bottom: 0px;
    }
    /deep/.el-form-item__label {
      font-size: 16px;
      color: #fff;
    }
    /deep/.el-input__inner {
        background-color: #4F5367;
        border: 1px solid #7A7F8E;
        color: #fff;
    }
    /deep/.el-form--inline .el-form-item {
        margin-right:30px;
        margin-bottom: 0px;
    }
    .submit{
      color: #63E9FF;
      border: 1px solid #00CEF0;
      background-color: rgba(49, 203, 236, 0.1400);
      border-radius: 2px;
    }
    .reset{
      background-color: transparent;
      border: 1px solid #fff;
      color: #fff;
      border-radius: 2px;
    }
  }
</style>